<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas {
            background-color: palegoldenrod;
        }
    </style>
</head>

<body>
    <canvas width="500" height="400"></canvas>

    <script>
        let canvas = document.getElementsByTagName('canvas')[0];
        //获取画笔
        let pen = canvas.getContext('2d');

        let i = 0;
        setInterval(() => {
            i == 360 ? i = 0 : i++;
            pen.save();
            pen.clearRect(0, 0, 500, 400)
            pen.translate(250, 200);
            pen.rotate(Math.PI / 180 * i)
            //左大半圆
            pen.arc(0, 0, 200, Math.PI / 180 * 270, Math.PI / 180 * 90, true);
            pen.fill()

            //右大半圆
            pen.beginPath()
            pen.arc(0, 0, 200, Math.PI / 180 * 270, Math.PI / 180 * 90);
            pen.fillStyle = '#fff'
            pen.fill()

            //上中圆
            pen.beginPath()
            pen.arc(0, -100, 100, 0, Math.PI / 180 * 360);
            pen.fill()

            //下中圆
            pen.beginPath()
            pen.arc(0, 100, 100, 0, Math.PI / 180 * 360);
            pen.fillStyle = 'black';
            pen.fill()

            //上小圆
            pen.beginPath()
            pen.arc(0, -100, 25, 0, Math.PI / 180 * 360);
            pen.fillStyle = 'black';
            pen.fill()


            //下小圆
            pen.beginPath()
            pen.arc(0, 100, 25, 0, Math.PI / 180 * 360);
            pen.fillStyle = 'white';
            pen.fill()

            pen.restore()

        }, 50)





    </script>

</body>

</html>